/* Media Quries  */
   @media (min-width : 280px) and (max-width : 452px)
   {
    .portfolioList ul{
      font-size: 9px !important;
    }
    .portfolioList a:hover{
      font-size: 11px !important;
    }
   }
   @media (min-width : 280px) and (max-width : 750px)
   {
    .footer .row{
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .footer .col-3{
      width: 100%;
    }
    .col-3{
      max-width: 100% !important;
    }
    .footer ol{
      padding-left: 0% !important;
    }
   }
   @media only screen and (max-width :748px) {
    .mobileView{
      display: none !important;
    }
  }
   /* ------ */
   .navbar p{
        font-size: 30px;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .nav-link
    {
        font-weight: bolder !important;
        color: black !important;
        margin-left: 30px;
    }
    .company-portfolio img{
        height: 110px;
    }
    .company-portfolio h2{
        color: white;
        text-align: center;
        justify-content: right;
        margin-top: auto;
        margin-bottom: auto;
        display: flex;
    }
    .company-portfolio{
        background-color: black;
        padding-top: 10px;
        padding-bottom: 10px;
        border-radius: 100px;
        width: 95% !important;
    }
    .image{
        width: 100%;
        height: 100%;
        display: block;
        transition: transform 0.3s;
    }
    .first_card{
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        gap :15px;
        flex-direction: row;
        width: 100%;
        margin-bottom: 20px;
    }
    .second_card{
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        gap :15px;
        flex-direction: row;
        width: 100%;
        margin-bottom: 20px;
    }
    .card{
        height: 500px !important;
        width: 330px !important;
        border-radius: 10px !important;
    }
    .card img{
        width: 100% !important;
        height: 70%;
    }
    .portfolios{
        flex-direction: row;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }
    .text-link{
        text-align: center;
        text-decoration: none;
    }
    .showAll {
        position: relative;
        margin: 10px;
      }
      
      .image-container {
        position: relative;
        overflow: hidden;
        width: 200px; /* Set the fixed width */
        height: 200px; /* Set the fixed height */
        border-radius: 10px; /* Apply border radius */
      }
      .overlay1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6); /* Black background with transparency */
        opacity: 0;
        transition: opacity 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px; /* Apply border radius */
      }
      
      .text {
        color: #fff;
        font-size: 17px;
        font-weight: bold;
        text-align: center;
      }
      
      .showAll:hover .image {
        transform: scale(1.05); /* Increase size on hover */
      }
      
      .showAll:hover .overlay1 {
        opacity: 1; /* Show overlay on hover */
      }
      .portfolioList a
      {
        text-decoration: none;
        color: black;
        transition: font-size 0.3s;
      }
      .portfolioList ul{
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 50px 0px;
        list-style: none;
        font-size: 13px;
        font-family: "Josefin Sans", sans-serif;
        text-transform: uppercase;
        padding-left: 0% !important;
      }
      .portfolioList li{
        text-align: center;
        margin: 0% 5%;
        margin-left: 0 !important;
      }
      .portfolioList{
        width: 100%;
      }
      .portfolioList a:hover{
        font-size: 15px;
        color: rgb(66, 66, 255);
        font-weight: bolder;
      }
      .footer{
        background-image: url(image1.jpg);
        background-repeat: no-repeat;
        color: white;
        max-width: 100%;
        border-radius: 50px;
        background-size: cover;
        padding-top: 30px;
        margin-bottom: 10px;
        width: 99% !important;
      }
      .row{
        padding-left: 10px;
        padding-right: 10px;
      }
      .footer h3{
        text-align: center;
      }
      .footer ol{
        text-align: center;
        list-style: none;
      }
      .footer ul{
        list-style: none;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .fa{
        padding-right: 20px;
        font-size: 25px;
      }
      .modal-header{
        background-color: rgb(14, 42, 71);
      }
      .modal-title {
        color: white;
      }
      .getQuote{
        display: flex;
        justify-content: end;
      }
      @media screen and (max-width: 445px) {
        .document {
          display: block !important;
        }
        .upload {
          width: 100% !important;
        }
        .qrCode{
          padding-top: 20px;
          float: left !important;
        }
      }
      .upload{
        max-width: 50%;
        padding: 0 !important; 
        margin: 0 !important;
      }
      .document{
        display: flex;
        justify-content: space-between;
      }
      .document img{
        width: 180px; 
        height: 180px;
      }
      .qrCode{
        max-width: 50%;
        float: right;
      }
      #quoteBtn {
        background-color: rgb(14, 42, 71);
        color: white;
        transform: rotate(-90deg); /* Use a single "transform" property for cross-browser compatibility */
        transform-origin: 0 0; /* Set the transform origin to pivot from the top-left corner */
        position: fixed;
        top: 50%;
        right: -75px;
        transition: right 0.3s ease-in-out;
        z-index: 999;
        border-radius: 20px;
      }